
<script type="text/javascript" objname="zhuanjiao">
    var nodes=Frame.Helper.LoadIDS(['zhuanjiao-mainview']);
    var scer=new Frame.View.Scroller(nodes['zhuanjiao-mainview'],500,true,this.zhuanjiao);

    var p1ws=Frame.Helper.LoadIDSToArray(['zhuanjiao-w1','zhuanjiao-w2','zhuanjiao-w3']);
    this.zhuanjiao.pfun1=function(){
        Frame.Animation.stop(function () {

            p1ws[0].animal('Text','CharIn','slow-blurin',100);
            [p1ws[1],p1ws[2]].animal('Text','CharIn','slow-blurin',200);
        });
    };
    this.zhuanjiao.lfun1=function () {
        Frame.Animation.stop(function () {
            p1ws.animalClear();
        })
    };
    var p2s=Frame.Helper.LoadIDSToArray(['zhuanjiao-w4','zhuanjiao-w5']);
    this.zhuanjiao.pfun2=function () {
        Frame.Animation.stop(function () {
            p2s.animallist('Text','CharIn',[{aniname:'upin',count:1},{aniname:'leftin',count:2}],200);
        });
    };
    this.zhuanjiao.lfun2=function () {
        Frame.Animation.stop(function () {
            p2s.animalClear();
        });
    };
    document.getElementsByClassName('zhuanjiao-back').usenode();
    p1ws.ContentInit();
    p2s.ContentInit();
    this.zhuanjiao.lfun1();
    this.zhuanjiao.pfun2();
    this.zhuanjiao.pfun1();
</script>
<div id="zhuanjiao-content">
    <div id="zhuanjiao-mainview" class="v-view">
        <div id="zhuanjiao-p1" content="true" pagefun="this.pfun1();"  leavefun="this.lfun1();">
            <div class="zhuanjiao-back"><img class="photo"  src="image/zhuanjiao/1.jpg"></div>
            <div class="zhuanjiao-v" id="zhuanjiao-w1">
                <!--夜，宁静的夜，不管是在城市还是农村，夜晚的降临总带来另一种气息，宁静而悠远…………-->
            </div>
            <div class="zhuanjiao-back"><img src="image/zhuanjiao/2.jpg" class="photo"></div>
            <div class="zhuanjiao-v" id="zhuanjiao-w2">
                <!--在远离人群的野外，这种感觉尤为强烈。特别是天上那似乎远处世外的星空。还有那美丽的银河，群星在里面酝酿.....-->
            </div>
            <div class="zhuanjiao-h" id="zhuanjiao-w3">
                一片树林里分出两条路—— 而我选择了人迹更少的一条， 从此决定了我一生的道路。<br>

            </div>
        </div>
        <div id="zhuanjiao-p2"content="true" pagefun="this.pfun2();" leavefun="this.lfun2();">
            <div class="zhuanjiao-back" ><img src="image/zhuanjiao/3.jpg" class="photo"></div>
            <div class="zhuanjiao-back" ><img src="image/zhuanjiao/4.jpg" class="photo"></div>
            <div class="zhuanjiao-v" id="zhuanjiao-w5"></div>
            <div class="zhuanjiao-h" id="zhuanjiao-w4"> 俯拾即是，不取诸邻。俱道适往，著手成春。
                如逢花开，如瞻岁新。真予不夺，强得易贫。
                幽人空山，过水采蘋，薄言情晤，悠悠天钧。 </div>
        </div>
    </div>
</div>
<style>
    #zhuanjiao-content{
        font-family: "maobi";
        margin: 20px 0 0 20px;
    }
    #zhuanjiao-mainview>div{
        transition: margin-top 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
    }
    #zhuanjiao-content{
        height: 100%;
        width: 100%;
    }
    .zhuanjiao-v{
        writing-mode: vertical-lr;
        height: 60%;
        display: inline-block;
        vertical-align: top;
        margin-top: 10px;
    }
    .zhuanjiao-h{
        margin-top: 1em;

    }
    .zhuanjiao-h,.zhuanjiao-v{
        word-wrap: break-word;
        word-break: break-all;
    }

    .zhuanjiao-v,.zhuanjiao-h{
        font-size: 1.3em;
        line-height: 1.3;
    }
    .zhuanjiao-back{
        height: 70%;
        display: inline-block;
        transition: all 0.2s linear;
    }
    .photoactive>img{
        display: block;
    }
    #zhuanjiao-mainview img{
        height: 100%;
        margin:auto;

    }

    #zhuanjiao-w1{
        width: 4em;
    }
    #zhuanjiao-w2{
        width: 5em;
    }
    #zhuanjiao-w2{
        margin-top:10px;
    }

    #zhuanjiao-w4{
        width: 60%;
    }
    #zhuanjiao-w5{
        height: 70%;
    }
    #zhuanjiao-p2 .zhuanjiao-back{
        margin-right: 50px;
    }

</style>